<script>
import touzi from "../views/touzi.vue";
import girl from "@/assets/svg/girl.svg";
import man from "@/assets/svg/man.svg";
import config from "@/checkerboard";
import green from "@/assets/svg/green.svg";
import red from "@/assets/svg/red.svg";
import blue from "@/assets/svg/blue.svg";
import yellow from "@/assets/svg/yellow.svg";
import around from "@/assets/svg/yellow-around.svg";
import people from "@/components/people-container.vue";
import dice from "@/components/roll-dice.vue";
import RsDialog from "@/components/rs-Dialog.vue";
export default {
  components: {
    RsDialog,
    touzi,
    girl,
    man,
    green,
    red,
    blue,
    yellow,
    around,
  },

  data() {
    return {
      config,
      sex: 1,
      man: 0,
      girl: 0,
      DialogShow: false,
    };
  },
  methods: {
    addTask() {
      alert("正在开发中，请稍待。");
    },
    /**
     * 根据type循环当前组件
     * @param {{color:string,type:string}} item
     * @return {Component|string}
     */
    outputComponent(item) {
      if (item.type === "rectangle") {
        return item.color;
      } else if (item.type === "around") {
        return item.type;
      } else if (item.type === "piece") {
        return "div";
      } else if (item.type === "people") {
        return people;
      } else if (item.type === "dice") {
        return dice;
      }
    },
    /**@description 获取两个数中间的数字
     * @param {number} num1 开始数字
     * @param {number} num2 结束数字
     * @return {number[]} numbers
     */
    getNumbersBetween(num1, num2) {
      var start = Math.min(num1, num2),
        end = Math.max(num1, num2),
        numbers = [];

      for (let i = start; i <= end; i++) {
        numbers.push(i);
      }

      return numbers;
    },
    diceChange(result) {
      if (this.sex) {
        this.movePeople(this.sex, result);
        this.man += result;
        this.sex = 0;
      } else {
        this.movePeople(this.sex, result);
        this.girl += result;
        this.sex = 1;
      }
      // alert(`性别:${this.sex ? "男" : "女"},结果:${result}`);
    },
    /**
     *移动人物
      @param {boolean|number} sex 性别
      @param {number} points  骰子点数
     */
    movePeople(sex, points) {
      const start = sex ? this.man : this.girl;
      const end = sex ? this.man : this.girl;

      const bet = this.getNumbersBetween(start, points + end);

      // eslint-disable-next-line no-shadow
      let man = document.getElementsByClassName(sex ? "man" : "girl")[0];

      //获取经过的板块
      // eslint-disable-next-line one-var
      const allPlace = [];

      bet.forEach((element) => {
        const place = config[0].value.find(
            (item) => item.place === element
          ).order,
          plate = this.$refs[`plate-${place}`];

        if (plate) {
          const { x, y } = plate[0].getBoundingClientRect();

          allPlace.push({ x, y });
        }
      });
      // eslint-disable-next-line one-var
      let pre = allPlace[0];
      // eslint-disable-next-line one-var
      let index = 0,
        timer = setInterval(() => {
          if (index < allPlace.length) {
            if (pre.x !== allPlace[index].x) {
              man.style.left = allPlace[index].x + "px";
              pre = allPlace[index];
            } else if (pre.y !== allPlace[index].y) {
              man.style.top = allPlace[index].y + "px";
              pre = allPlace[index];
            }
            index++;
          } else {
            clearInterval(timer);
            this.DialogShow = true;
          }
        }, 500);
    },
    close() {
      this.DialogShow = false;
    },
  },
};
</script>

<template>
  <div class="div">
    <div class="popupNotification" v-if="false">
      <!-- <popupNotification />  -->
    </div>
    <header class="header-bar">
      <h3>物业惊魂-保安大战保洁</h3>
      <p class="button" @click="addTask()">+自定义任务</p>
    </header>
    <div class="app-main">
      <div class="main">
        <div
          class="borard"
          :style="{ order: item.order }"
          v-for="(item, index) in config[0].value"
          :key="index"
          :ref="`plate-${index + 1}`"
        >
          <component
            :is="outputComponent(item)"
            :data="item"
            :sex="sex"
            @change="diceChange"
          ></component>
        </div>
      </div>
    </div>
    <RsDialog ref="RsDialog" :show="DialogShow" @close="close"></RsDialog>
  </div>
</template>

<style lang="scss" scoped>
.div {
  width: 100%;
  // height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(
    300px circle at right top,
    rgb(255, 0, 153),
    rgb(36, 16, 30)
  );
  position: relative;
  .popupNotification {
    position: absolute;
    top: 25%;
    left: calc(50% - 39%);
    width: 78%;
    height: 206px;
    background-color: #e465af;
  }
  header {
    width: 100%;
    height: 100px;
    line-height: 100px;
    position: relative;
    h3 {
      font-size: 20px;
      text-align: center;
      color: aliceblue;
      font-weight: 600;
      letter-spacing: 6px;
    }
  }
  .button {
    color: gray;
    border: none;
    font-size: 14px;
    position: absolute;
    top: 0;
    right: 10px;
  }
  .app-main {
    flex: 1;
    .main {
      height: 100%;
      padding: 20px 30px;
      display: grid;
      grid-template-rows: repeat(14, 1fr); /* 创建14行 */
      grid-template-columns: repeat(7, 1fr); /* 创建7列 */
      gap: 10px; /* 可选项，定义网格项之间的间隔 */
      .borard {
        width: 100%;
        height: 100%;
        display: flex;
        svg {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
</style>
